<template>
  <div id="div1">
    <div id="div2">
      <work-order-pro style="height:420px"></work-order-pro>
      <week-work-order style="height:300px"></week-work-order>
      <week-work-order2 style="height:360px"></week-work-order2>
    </div>
    <div id="div3">
      <operation-statistics style="height:540px"></operation-statistics>
      <operation-statistics style="height:540px"></operation-statistics>      
    </div>
    <div id="div4">
      <classification-statistics style="height:540px"></classification-statistics>
      <interface-state style="height:540px"></interface-state>
    </div>
  </div>
</template>
<script>
import WorkOrderPro from "./charts/WorkOrderPro";
import WeekWorkOrder from "./charts/WeekWorkOrder";
import WeekWorkOrder2 from "./charts/WeekWorkOrder2";
import ClassificationStatistics from "./charts/ClassificationStatistics";
import InterfaceState from "./charts/InterfaceState";
import OperationStatistics from "./charts/OperationStatistics";
export default {
  components: {
    WorkOrderPro,
    WeekWorkOrder,
    WeekWorkOrder2,
    ClassificationStatistics,
    InterfaceState,
    OperationStatistics
  }
};
</script>

<style scoped>
#div1 {
  width: 1920px;
  height: 1080px;
  background-color: 0d2a42;
}
#div2 {
  float: left;
  width: 30%;
  height: 100%;
}
#div3 {
  float: left;
  width: 40%;
  height: 100%;
}
#div4 {
  float: left;
  width: 30%;
  height: 100%;
}
</style>
